<template>
  <div :class="['swiper', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <el-carousel v-if="$ua.isFromPc()" indicator-position="outside" :autoplay="true" :height="hdgd + 'px'">
      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
        <img ref="bannerHeight" class="image" fit="cover" :src="item.url" @load="imgLoad" alt="" />
      </el-carousel-item>
    </el-carousel>
    <van-swipe v-else class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <img ref="bannerHeight" class="image" fit="cover" :src="item.url" @load="imgLoad" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
export default {
  name: 'swiper',
  props: {

  },
  data() {
    return {
      bannerList: [],
      hdgd: ''
    }
  },
  created() {

  },
  mounted() {

    // this.customScrollTop()
    this.bannerList = this.$store.state.router.router[0].children.filter(item => {
      return item.path === location.pathname
    })[0].meta.banner_list
    console.log('首页banner', this.bannerList)
    this.imgLoad()
    window.addEventListener('resize', () => {
      this.hdgd = this.$refs.bannerHeight[0].height
      this.imgLoad()
    }, false)
  },
  methods: {
    getImgUrl,
    imgLoad() {
      this.$nextTick(() => {
        if (this.$refs.bannerHeight) {
          this.hdgd = this.$refs?.bannerHeight[0].height
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .swiper {
    // width: 100%;

    // .el-carousel__item h3 {
    //   color: #475669;
    //   font-size: 18px;
    //   opacity: 0.75;
    //   line-height: 300px;
    //   margin: 0;
    // }
    // ::v-deep(.el-carousel__container) {
    //   height: 417px
    // }
    ::v-deep(.el-carousel__arrow) {
      width: 100px;
      height: 100px;
    }

    &.z-web {
      .image {
        width: 100%;
        height: 952px;
      }

      ::v-deep(.el-carousel__container) {
        height: 952px !important;
      }
    }

    &.z-phone {
      margin-bottom: pxtorem(134);
      .image {
        width: 100%;
      }
    }
  }
</style>
